<template>
  <el-form
    :model="ruleForm"
    status-icon
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
  >
    <el-form-item label="用户名" prop="username">
      <el-input type="text" v-bind:value="ruleForm.username" disabled></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-select v-model="ruleForm.gender">
        <el-option label="男" value="male"></el-option>
        <el-option label="女" value="female"></el-option>
        <el-option label="保密" value="保密"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="是否单身" prop="isSingle">
      <el-select v-model="ruleForm.isSingle">
        <el-option label="单身" value="单身"></el-option>
        <el-option label="已婚" value="已婚"></el-option>
        <el-option label="保密" value="保密"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model.number="ruleForm.age"></el-input>
    </el-form-item>
    <el-form-item label="电话号码" prop="phone">
      <el-input v-model.number="ruleForm.phone"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click="submitForm">修改</el-button>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  data(){
    /* 电话号码的自定义校验规则 */
    var checkphone = (rule, value,callback) => {
      if (!value){
        callback(new Error('请输入电话号码'))
      }else  if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(value)){
        callback(new Error('请输入正确的11位手机号码!'))
      }else {
        /* 通过后的回调必须写，否则前端验证会一直转圈 */
        callback()
      }
    };

    return{
      userID:'',
      ruleForm: {
        username: "",
        password: "",
        gender: "保密",
        age: "",
        phone:'',
        isSingle:'保密'
      },
      /* 正则规则 */
      rules:{
        age: [
            { required: true, message: '请输入年龄', trigger: 'blur' }
          ],
        password:[
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        /* 自定义校验规则 */
        phone:[
          { validator: checkphone, trigger: 'blur' },
          {required: true}
        ]
      }
    }
  },
  async created(){
    /* 发送ajax请求获取当前用户信息 */
    let {id} = this.$route.params;
    let {data} = await this.$request.get('/user/'+id);
    /* 把id改成响应式属性 */
    this.userID = id;
    /* 合并数据 */
    Object.assign(this.ruleForm,data.data[0]);
  },
  methods:{
    /* 提交表单判断正则是否全部符合 */
    submitForm() {
        this.$refs['ruleForm'].validate(async(valid) => {
          /* valid为校验结果 */
          if (valid) {
            /* 获取用于发送请求的id和表单所有数据 */
            const {userID,ruleForm} = this;
            const {data} = await this.$request.put('/user/'+userID,{
              ...ruleForm
            })
            if(data.code===1){
              this.$message({
                message: '修改成功！',
                type: 'success'
              });
            }
          } else {
            alert('请填写符合要求的信息!!');
            return false;
          }
        });
      }
  }
};
</script>